<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-01-09 17:32:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-09 18:11:32
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入echarts.js文件 -->
    <script src="./echarts.min.js"></script>
    <script src="./sina.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script> -->
</head>

<body>
    <!--2.准备好一个区域  这里用来显示图表  -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script>
        //数据处理 
        // 先将json 转成js数据格式 
        var res = JSON.parse(alldata);
        var mydata = [];
        res['data']['list'].forEach(function (item) {
        // console.log(item); 数组的每个元素是对象
        // 现存  累积 死亡 治愈 
        for(var k in item){
            var obj = {};
            obj['city'] = item['name'];
            obj['xiancun'] = item['econNum'];
            obj['value'] = item['value'];
            obj['deathNum'] = item['deathNum'];
            obj['zhiyu'] = item['cureNum'];
        }
            mydata.push(obj);
        });
    // 冒泡排序 降序排列 
    for(var i=0;i<mydata.length-1;i++){
        for(var j=0;j<mydata.length-1-i;j++){
            if(parseInt(mydata[j]['value'])<parseInt(mydata[j+1]['value'])){
                    var temp = mydata[j];
                    mydata[j] = mydata[j+1];
                    mydata[j+1] = temp;

            }
        }
    }
    //[{},{},{}]
    var last_data = mydata.slice(0,10);

    var cities = [];
    last_data.map(function(item){
        cities.push(item['city']);
    })
    var nums = []
    last_data.map(function(item){
        nums.push(item['zhiyu']);
    })

        // 找到要显示图表的容器  初始化一个图表对象
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            xAxis: {
                type: 'category',
                data: cities, //['广州','深圳','北京','上海','武汉','天津','杭州','成都','重庆','南京']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: nums, //[100,200,300,400,500,600,700,800,900,1000]
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };

        // 让数据生效 
        myChart.setOption(option);

        
    </script>
</body>

</html>